<template>
  <div class="">
    <el-divider content-position="left">轮询</el-divider>
    <el-checkbox v-model="lunxuncheck" label="开启"></el-checkbox><br />
    <div style="display: flex">
      <span style="display: inline-block; width: 50px; line-height: 50px">
        PATH:
      </span>
      <el-input
        v-model="lunxunpath"
        placeholder=""
        size="normal"
        clearable
        style="width: 100px"
      ></el-input
      ><br />
    </div>
    <div style="display: flex">
      <span style="display: inline-block; width: 50px; line-height: 50px">
        频率:
      </span>
      <el-input
        v-model="lunxunpinlv"
        placeholder=""
        size="normal"
        clearable
        style="width: 100px"
      ></el-input
      ><br />
    </div>

    <el-divider content-position="left">websocket</el-divider>
    <el-checkbox v-model="websockcheck" label="开启"></el-checkbox><br />
    <div style="display: flex">
      <span style="display: inline-block; width: 50px; line-height: 50px">
        PATH:
      </span>
      <el-input
        v-model="wspath"
        placeholder=""
        size="normal"
        clearable
        style="width: 100px"
      ></el-input
      ><br />
    </div>
    <el-divider content-position="left">数据格式</el-divider>
    <el-button type="primary" size="default" @click="showdialog"
      >设置</el-button
    >

    <el-button type="primary" size="default" @click="test()">test</el-button>
    

    <el-dialog
      title=""
      :visible.sync="showdia"
      width="60%"
      @close="showdia = false"
    >
      <div id="container1" style="height: 450px; width: 900px"></div>
      <span slot="footer">
        <el-button @click="showdia = false">Cancel</el-button>
        <el-button type="primary" @click="saveloaddata()">OK</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as monaco from "monaco-editor";

import { Base64 } from "js-base64";

export default {
  components: {},
  data() {
    return {
      lunxuncheck: "",
      lunxunpath: "",
      lunxunpinlv: "",
      websockcheck: "",
      wspath: "",
      editor: "",
      configval: "",
      showdia: false,
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    test(){

      let options = {}
      let res = 10


      let aaa = `
        this.options.series[0].data[0] = res;
        this.myChart.setOption(this.options);
      `

      let bbb = `
        options = {
            xAxis: {
                type: "category",
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
            yAxis: {
                type: "value",
        },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: "line",
                },
            ]
        }
      `
      eval(bbb)
      eval(aaa)
      console.log(options);
      // bbb()
    },
    saveloaddata() {
      if (!_.has(this.$store.state.editer.editeractived, "componentDetail")) {
        this.$store.state.editer.editeractived["componentDetail"] = {};
      }
      this.$store.state.editer.editeractived.componentDetail["loaddata"] =
        this.editor.getValue();
      this.showdia = false;
    },
    showdialog() {
      this.showdia = true;

      if (
        _.has(this.$store.state.editer.editeractived, "componentDetail") &&
        _.has(this.$store.state.editer.editeractived.componentDetail, "loaddata")
      ) {
        this.configval =
          this.$store.state.editer.editeractived["componentDetail"]["loaddata"];
      }

      if (this.editor != "") {
        this.editor.setValue(this.configval);
      } else {
        setTimeout(() => {
          this.initEditor();
        }, 0);
      }
    },
    initEditor() {
      // 初始化编辑器，确保dom已经渲染
      this.editor = monaco.editor.create(
        document.getElementById("container1"),
        {
          value: this.configval, //编辑器初始显示文字
          language: "javascript", //语言支持自行查阅demo
          automaticLayout: true, //自动布局
          theme: "vs-dark", //官方自带三种主题vs, hc-black, or vs-dark
        }
      );
    },
    getValue() {
      this.editor.getValue(); //获取编辑器中的文本
    },
  },
};
</script>
<style lang='scss' scoped>
</style>